<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	  <title>开始使用layui</title>
	  <link rel="stylesheet" href="static/css/layui.css">
	  <script src="static/layui.js"></script>
	  <style>
		.footer {
			padding: 30px 0;
			line-height: 30px;
			text-align: center;
			color: #666;
			font-weight: 300;
		}
		.footer-index p {
			display: inline-block;
			vertical-align: middle;
			height: 50px;
			padding-right: 10px;
		}
	  </style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class='layui-header header'>
				<ul class="layui-nav">
				  <li class="layui-nav-item"><a class="logo" href="/">
					  <img src="static/images/index.png" alt="layui" style="width:82px;height:31px">
					</a>
				  </li>
				  <li class="layui-nav-item layui-this">
					<a href="javascript:;">产品</a>
				  </li>
				  <li class="layui-nav-item"><a href="">大数据</a></li>
				  <li class="layui-nav-item">
					<a href="javascript:;">解决方案</a>
					<dl class="layui-nav-child">
					  <dd><a href="">移动模块</a></dd>
					  <dd><a href="">后台模版</a></dd>
					  <dd class="layui-this"><a href="">选中项</a></dd>
					  <dd><a href="">电商平台</a></dd>
					</dl>
				  </li>
				  <li class="layui-nav-item"><a href="">社区</a></li>
				</ul>
				<ul class="layui-nav layui-layout-right">
				  <li class="layui-nav-item">
					<a href="javascript:;">
					  <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
					  峰采
					</a>
					<dl class="layui-nav-child">
					  <dd><a href="">基本资料</a></dd>
					  <dd><a href="">安全设置</a></dd>
					</dl>
				  </li>
				  <li class="layui-nav-item"><a href="">退出</a></li>
				</ul>
			</div>
			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
					  <li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;">默认展开</a>
						<dl class="layui-nav-child">
						  <dd><a href="javascript:;">选项一</a></dd>
						  <dd><a href="javascript:;">选项二</a></dd>
						  <dd><a href="javascript:;">选项三</a></dd>
						  <dd><a href="">跳转项</a></dd>
						</dl>
					  </li>
					  <li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
						  <dd><a href="">移动模块</a></dd>
						  <dd><a href="">后台模版</a></dd>
						  <dd><a href="">电商平台</a></dd>
						</dl>
					  </li>
					</ul>
				</div>
			</div>
			<div class="layui-body layui-tab-content" style="background-color: #eee">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
					  <div class="layui-card-body">
							<div class="layui-tab layui-tab-card" lay-allowclose="true">
							  <ul class="layui-tab-title">
								<li class="layui-this">用户管理</li>
							  </ul>
							  <div class="layui-tab-content" style="height:100%; background-color:#ffffff">
								<div class="layui-tab-item layui-show">
									<form class="layui-form layui-form-pane">
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">用户名</label>
												<div class="layui-input-inline">
												  <input type="text" id="nameParam" name="nameParam" placeholder="请输入" autocomplete="off" class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">年龄</label>
												<div class="layui-input-inline">
												  <input type="text" id="ageParam" name="ageParam" placeholder="请输入" autocomplete="off" class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">性别</label>
												<div class="layui-input-inline">
													<select name="genderParam" id="genderParam" lay-verify="" >
														<option value="">请选择性别</option>
														<option value="男">男</option>
														<option value="女">女</option>
													</select>

												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-row">
												<div style="float:left">
													<button type="button" class="layui-btn add">新增用户</button>
												</div>
												<div style="float:right">
												  <button type="button" class="layui-btn" id="queryButton">查询</button>
												  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
												</div>
											</div>
										</div>
									</form>
									<table class="layui-hide" id="test" lay-filter="test"></table>
								</div>
								<div class="layui-tab-item">2</div>
								<div class="layui-tab-item">3</div>
								<div class="layui-tab-item">4</div>
								<div class="layui-tab-item">5</div>
								<div class="layui-tab-item">6</div>
							  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer footer footer-index" style="background-color: #f5f6f5">
			  <div class="layui-main">
				<p>© 2019 <a href="/">layui.com</a> MIT license</p>
				<p>
				  <a href="http://fly.layui.com/case/2019/" target="_blank">案例</a>
				  <a href="http://fly.layui.com/jie/3147/" target="_blank">支持</a>
				  <a href="javascript:;" site-event="contactInfo">联系</a>
				  <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
				  <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
				  <a href="http://fly.layui.com/jie/2461/" target="_blank">公众号</a>
				  <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">赣ICP备13006272号-2</a>
				</p>
			  </div>
			</div>
		</div>

		<form class="layui-form" id="userForm" style="display:none">
			<input type="text" name="id" id = "id" style="display:none">
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="on" class="layui-input" id="userName" style="width:200px">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-block">
					<input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="on" class="layui-input" id="age" style="width:200px">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block" style="width:200px">
					<select name="gender" id="gender" lay-verify="" >
						<option value="">请选择性别</option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">城市</label>
				<div class="layui-input-block">
					<input type="text" name="city" required  lay-verify="required" placeholder="请输入城市" autocomplete="on" class="layui-input" id="city" style="width:200px">
				</div>
			</div>
		</form>

		<script>
			//一般直接写在一个js文件中
			layui.use(['layer', 'form','element', 'table', 'jquery'], function(){
			  var layer = layui.layer, form = layui.form, element = layui.element, table = layui.table, $ = layui.jquery;
			  //监听导航点击
			  element.on('nav(demo)', function(elem){
				layer.msg(elem.text());
			  });

			  var defaultUrl = "http://localhost:8080"

			  table.render({
				 elem: '#test'
				,even: true //开启隔行背景
				,url: defaultUrl+ '/userList/'
				,request: {
					  pageName: 'pageNum' //页码的参数名称，默认：page
					 ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,where:{
					  userName: $("#nameParam").val()
					  ,age: $("#ageParam").val()
					  ,gender: $("#genderParam").val()
				 }
				,parseData: function(res){ //res 即为原始返回的数据
					  return {
						  "code": res.code, //解析接口状态
						  "msg": res.msg, //解析提示文本
						  "count": res.count, //解析数据长度
						  "data": res.data //解析数据列表
					  };
				}
				,cols: [[
				   {type:'checkbox'}
				  ,{field:'id', align:'center', title: 'ID', sort: true}
				  ,{field:'userName', align:'center', title: '用户名'}
				  ,{field:'age', align:'center', title: '年龄', sort: true}
				  ,{field:'gender', align:'center', title: '性别', sort: true}
				  ,{field:'city', align:'center', title: '城市'}
				  ,{field:'', align:'center', title: '操作', templet:function(res){
					return "<a class='layui-btn layui-btn-primary layui-btn-xs' lay-event='detail'>查看</a>" +
							"<a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>" +
							"<a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='delete'>删除</a>"
				   }}
				]]
				,page: true
			  });

			  table.on('tool(test)', function(obj){
				var data = obj.data;
				switch(obj.event){
					case 'detail':
						$('#userForm').find('input,textarea').attr("readonly","readonly");
						openForm('查看用户', data, 1);
						break;
					case 'edit'	:
						$('#userForm').find('input,textarea').removeAttr("readonly");
						openForm('编辑用户', data, 2);
						break;
					case 'delete':
						layer.confirm('确定删除当前用户吗?', function(index){
							_ajax('http://localhost:8080/saveUser/', {id: data.id, isDelete: 1})
							layer.close(index);
						});
						break;
				}

				//标注选中样式
				obj.tr.removeClass('layui-table-click');
			  });

			  var reloadTable = function(){
				  table.reload('test',{
					  where:{
						  userName: $("#nameParam").val()
						  ,age: $("#ageParam").val()
						  ,gender: $("#genderParam").val()
					  }
				  });
			  }

			  $("#queryButton").click(function () {
				  reloadTable();
			  });

			  $(".layui-btn.add").click(function (e) {
				  openForm('新增用户', null, 3);
			  });

			  var openForm = function (title, data, type) {
			  	$('#userForm')[0].reset();
			  	$("#id").attr("value", '');

			  	if(data != null && data != ''){
			  		console.log(data);
					$("#userForm").find("#id").val(data.id);
					$("#userForm").find("#userName").val(data.userName);
					$("#userForm").find("#age").val(data.age);
					$("#userForm").find("#gender").val(data.gender);
					form.render('select', 'userForm');
					$("#userForm").find("#city").val(data.city);
				}
				  openDialog(title, type);
			  }

			  var openDialog = function (title, type) {
			  	if(type == 1){
					layer.open({
						type:1,
						area:['400px','410px'],
						title: title,
						content: $("#userForm"),
						shade: 0,
						cancel: function(layero,index){
							layer.closeAll();
						}
					});
				} else {
					layer.open({
						type:1,
						area:['400px','410px'],
						title: title,
						content: $("#userForm"),
						shade: 0,
						btn: ['提交', '重置']
						,btn1: function(index, layero){
							saveUser();
						},
						btn2: function(index, layero){
							$('#userForm')[0].reset();
							return false;
						},
						cancel: function(layero,index){
							layer.closeAll();
						}
					});
				}
			  }

			  var saveUser = function () {
				  var data = $('#userForm').serializeArray();
				  var obj = {};
				  $.each(data, function(index, field) {
					  obj[field.name] = field.value;
				  });
				  _ajax(defaultUrl+ '/saveUser/', obj)
			  }

			  var _ajax = function (url, obj) {
				  $.ajax({
					  url: url,
					  type:'post',
					  contentType: "application/json",
					  data:JSON.stringify(obj),
					  success:function(data){
						  reloadTable();
						  layer.closeAll();
						  layer.alert('操作成功');
					  },
					  error: function () {
						  layer.closeAll();
					  },
				  });
			  }
			});
		</script>
	</body>
</html>